﻿@page "/Tools"
@using iOSClub.WebSite.Models
@inject HttpClient client
<PageTitle>iOS App - 西建大iOS Club</PageTitle>

<br/>

<GridRow Align="center" Justify="center">
    <GridCol Span="18">
        @foreach (var link in Models)
        {
            <a href="@link.Url" target="_blank"
               class="a-btn"
               title="@link.Description">
                <Flex Align="center" Justify="space-between">
                    <div>
                        @if (!string.IsNullOrEmpty(link.Icon))
                        {
                            if (link.Icon.StartsWith("http"))
                            {
                                <img alt="" src="@link.Icon" style="height: 22px;width: 22px;border-radius: 4px"/>
                            }
                            else
                            {
                                <IconFont class="btn-title" Type="@($"icon-{link.Icon}")"/>
                            }
                        }
                        else
                        {
                            <img alt="" src="@link.Url.GetIcon()" style="height: 22px;width: 22px;border-radius: 4px"/>
                        }
                        <span class="btn-title">@link.Name</span>
                    </div>
                    <span class="btn-description">@link.Description</span>
                </Flex>
            </a>
        }
        @if (Models.Length == 0)
        {
            <Empty Image="https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg" Style="padding: 20px" Description="@("社团还没加入")"/>
        }
    </GridCol>
</GridRow>

@code {
    private LinkModel[] Models { get; set; } = [];

    protected override async Task OnInitializedAsync()
    {
        var data = await client.GetFromJsonAsync<CategoryModel>("https://link.xauat.site/api/Link/GetCategory/社团出品");
        if (data == null) return;
        Models = data.Links.ToArray();
        await base.OnInitializedAsync();
    }

}

<script src="//at.alicdn.com/t/c/font_4612528_md4hjwjgcb.js"></script>

<style>
    .ant-layout-footer{
        display: none;
    }

    .a-btn {
        display: inline-block;
        transition: .2s;
        cursor: pointer;
        margin: 5px 5px 0 0;
        border-radius: 10px;
        padding: 5px;
        border: 1px solid #ffffff;
        width: 100%;
    }

    .a-btn:hover {
        transform: scale(1.02);
        border-color: #1890ff;
    }

    .btn-title {
        font-size: 20px;
        font-weight: 400;
        color: #000000;
    }

    .btn-description {
        color: #00000073;
        text-align: center;
        font-size: 18px;
    }
</style>